<template>
  <div class="store-secondary">
    <BackPreviou class="back-btn" @showMain="handelClick" />
    <div class="content">
      <Form
        :model="formState"
        name="basic"
        style="width: 1010px"
        :label-col="{ style: { width: '210px' } }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        label-align="right"
        :colon="false"
      >
        <div v-if="secondaryName === 'JE_SYS_ALIOSS'" class="only-office">
          <FormItem name="FILE_ALIYUN_ACCESSID" class="FILE_ALIYUN_ACCESSID" label="AccessKeyID ">
            <Input v-model:value="formState.FILE_ALIYUN_ACCESSID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.alAccessKeyIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="FILE_ALIYUN_ACCESSSECRET"
            class="FILE_ALIYUN_ACCESSSECRET"
            label="AccessKeySecret "
          >
            <Input v-model:value="formState.FILE_ALIYUN_ACCESSSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.alAccessKeySecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_ALIYUN_ENDPOINT" class="FILE_ALIYUN_ENDPOINT" label="EndPoint">
            <Input v-model:value="formState.FILE_ALIYUN_ENDPOINT" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.alEndPointTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_ALIYUN_BUCKENAME" class="FILE_ALIYUN_BUCKENAME" label="BucketName">
            <Input v-model:value="formState.FILE_ALIYUN_BUCKENAME" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.alBucketNameTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_TENCENTOSS'" class="only-office">
          <FormItem name="FILE_TENCENT_SECRETID" class="FILE_TENCENT_SECRETID" label="SecretID">
            <Input v-model:value="formState.FILE_TENCENT_SECRETID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.TXSecretIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_TENCENT_SECRETKEY" class="FILE_TENCENT_SECRETKEY" label="SecretKey">
            <Input v-model:value="formState.FILE_TENCENT_SECRETKEY" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.TXSecretKeyTip') }} </i>
            </div>
          </FormItem>
          <FormItem
            name="FILE_TENCENT_BUCKETNAME"
            class="FILE_TENCENT_BUCKETNAME"
            label="BucketName"
          >
            <Input v-model:value="formState.FILE_TENCENT_BUCKETNAME" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.TXBucketNameTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_TENCENT_REGION" class="FILE_TENCENT_REGION" label="Region">
            <Input v-model:value="formState.FILE_TENCENT_REGION" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.TXRegionTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_WELINKOSS'" class="only-office">
          <FormItem name="FILE_HW_ACCESSID" class="FILE_HW_ACCESSID" label="AccessKeyID">
            <Input v-model:value="formState.FILE_HW_ACCESSID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.hwAccessKeyIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_HW_ACCESSKEY" class="FILE_HW_ACCESSKEY" label="SecretAccessKey">
            <Input v-model:value="formState.FILE_HW_ACCESSKEY" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.hwSecretAccessKeyTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_HW_ENDPOINT" class="FILE_HW_ENDPOINT" label="ObsEndpoint">
            <Input v-model:value="formState.FILE_HW_ENDPOINT" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.hwObsEndpointTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_HW_BUCKENAME" class="FILE_HW_BUCKENAME" label="BucketName">
            <Input v-model:value="formState.FILE_HW_BUCKENAME" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.hwBucketNameTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_HARDDRIVE'" class="only-office">
          <FormItem name="FILE_LOCAL_BUCKETNAME" class="FILE_LOCAL_BUCKETNAME" label="BucketName">
            <Input v-model:value="formState.FILE_LOCAL_BUCKETNAME" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.localBucketNameTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_LOCAL_BASEPATH" class="FILE_LOCAL_BASEPATH" label="BasePath">
            <Input v-model:value="formState.FILE_LOCAL_BASEPATH" class="myInput"> </Input>
            <div class="text">
              <i
                >提示：存储到本地的路径，linux服务器注意设置目录权限为可读写示例:/data/file;@WebRoot@/file(@WebRoot@变量会自动替换为当前服务WebRoot目录)</i
              >
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_MINIO'" class="wps">
          <FormItem name="FILE_MINIO_BUCKENAME" class="FILE_MINIO_BUCKENAME" label="BucketName">
            <Input v-model:value="formState.FILE_MINIO_BUCKENAME" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.MinIOBucketNameTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_MINIO_HOST" class="FILE_MINIO_HOST" label="Host">
            <Input v-model:value="formState.FILE_MINIO_HOST" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.MinIOHostTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_MINIO_ENDPOINT" class="FILE_MINIO_ENDPOINT" label="Endpoint">
            <Input v-model:value="formState.FILE_MINIO_ENDPOINT" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.MinIOEndpointTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_MINIO_ACCESSKEY" class="FILE_MINIO_ACCESSKEY" label="Access Key">
            <Input v-model:value="formState.FILE_MINIO_ACCESSKEY" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.MinIOAccessKeyTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FILE_MINIO_SECRETKEY" class="FILE_MINIO_SECRETKEY" label="Secret Key">
            <Input v-model:value="formState.FILE_MINIO_SECRETKEY" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('files.secondary.MinIOSecretKeyTip') }}</i>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
  import BackPreviou from '@/components/back-previou.vue';
  import { Input, Form, Modal } from '@jecloud/ui';
  import { onUnmounted, reactive } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  export default {
    name: 'StoreSecondary',
    components: {
      Form,
      FormItem: Form.Item,
      Input,
      BackPreviou,
    },
    props: {
      secondaryName: {
        type: String,
        default: '',
      },
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['showMain'],
    setup(props, { emit }) {
      // code：相应子页面携带的参数
      const codeConfig = {
        JE_SYS_ALIOSS: 'file-storage-aliyun',
        JE_SYS_TENCENTOSS: 'file-storage-tencent',
        JE_SYS_WELINKOSS: 'file-storage-huawei',
        JE_SYS_HARDDRIVE: 'file-storage-local',
        JE_SYS_MINIO: 'file-storage-minio',
      };
      // 关闭子页面
      const closePage = () => {
        emit('showMain', false);
      };
      // 点击返回的回调
      const handelClick = () => {
        // 左侧导航栏是否允许切换
        VueEvent.emit('saveResult', isChange());
        if (isChange()) return closePage();
        useOpenDialog({
          attribute: codeConfig[props.secondaryName],
          allFields: JSON.stringify(formState),
        });
      };

      // 表单数据
      let formState = reactive({
        FILE_ALIYUN_ACCESSID: 'wx1fc3a25d9cd161ea',
        FILE_ALIYUN_ACCESSSECRET: '1ff601dbaf53c3a8100bdf663fe490c1',
        FILE_ALIYUN_ENDPOINT: 'dev.suanbanyun.com',
        FILE_ALIYUN_BUCKENAME: 'dev.suanbanyun.com',
        FILE_TENCENT_SECRETID: 'wx1fc3a25d9cd161ea',
        FILE_TENCENT_SECRETKEY: '1ff601dbaf53c3a8100bdf663fe490c1',
        FILE_TENCENT_BUCKETNAME: 'dev.suanbanyun.com',
        FILE_TENCENT_REGION: 'dev.suanbanyun.com',
        FILE_HW_ACCESSID: 'wx1fc3a25d9cd161ea',
        FILE_HW_ACCESSKEY: '1ff601dbaf53c3a8100bdf663fe490c1',
        FILE_HW_ENDPOINT: 'dev.suanbanyun.com',
        FILE_HW_BUCKENAME: 'dev.suanbanyun.com',
        FILE_LOCAL_BUCKETNAME: 'wx1fc3a25d9cd161ea',
        FILE_LOCAL_BASEPATH: '1ff601dbaf53c3a8100bdf663fe490c1',
        // FILE_LOCAL_DEFAULTBUCKET: 'dev.suanbanyun.com',
        FILE_MINIO_BUCKENAME: 'dev.wx1fc3a25d9cd161ea.com',
        FILE_MINIO_HOST: '1ff601dbaf53c3a8100bdf663fe490c1',
        FILE_MINIO_ENDPOINT: 'dev.suanbanyun.com',
        FILE_MINIO_ACCESSKEY: '1ff601dbaf53c3a8100bdf663fe490c1',
        FILE_MINIO_SECRETKEY: 'dev.suanbanyun.com',
      });

      // 对比项
      let meta = {};
      let res = {};
      const changeDataType = () => {
        res = props.dataAll.filter((item) => {
          return (
            item.key === 'JE_SYS_ALIOSS' ||
            item.key === 'JE_SYS_TENCENTOSS' ||
            item.key === 'JE_SYS_WELINKOSS' ||
            item.key === 'JE_SYS_HARDDRIVE' ||
            item.key === 'JE_SYS_MINIO'
          );
        });
        res.find((td) => {
          td.items.find((item) => {
            formState[item.code] = item.value;
          });
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType('props', props.dataAll);

      // 表单数据是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };

      // 点击保存回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: codeConfig[props.secondaryName],
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', {
              item: codeConfig[props.secondaryName],
              formState,
            }),
          );
        } else {
          // 如果显示了子页面就不提示
          Modal.notice('无数据操作!', 'info');
        }
      };

      // 滚动及动画
      const onScrollDe = () => {
        setTimeout(() => {
          onScroll();
        }, 0);
      };
      VueEvent.on('closeEvent', closePage);
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('fadeScrollSed', onScrollDe);
      VueEvent.on('isSave', handelClick);
      onUnmounted(() => {
        VueEvent.off('closeEvent', closePage);
        VueEvent.off('fadeScrollSed', onScrollDe);
        VueEvent.off('isSave', handelClick);
        VueEvent.off('toolbarSaveEvent', clickCallback);
      });

      return { handelClick, formState };
    },
  };
</script>

<style lang="less" scoped>
  .store-secondary {
    margin-left: -100px;
    .content {
      padding-top: 20px;
    }
    .back {
      width: 760px;
      height: 40px;
      color: #333333;
    }
  }
</style>
